<%@ page contentType="text/html;charset=UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext['request'].contextPath}" />
<script>
	var $tabs=$("#tabs").tabs({selected:2});
	/*修改密码*/
	function update_pwd(){
		var tip = $("#tip_pwd");
		var opwd = $("#opwd").val();
		var npwd = $("#npwd").val();
		var rpwd = $("#rpwd").val();
		if(opwd == "" || npwd == "" || rpwd == "") {
			tip.html("<font color='red'>新旧密码都必填</font>");
		} else  if(opwd == npwd) {
			tip.html("<font color='red'>新的密码不能和旧密码相同</font>");
		} else if(rpwd != npwd) {
			tip.html("<font color='red'>两次密码输入不一致</font>");
		} else if (npwd.length < 6 || npwd.length > 15) {
			tip.html("<font color='red'>密码长度必须在6~15位</font>");
		} else {
			var url = "${ctx}/user/home/updatePwd";
			var params = {
				opwd: opwd,
				npwd: npwd
			};
			$.post(url, params, function(data){
				if(data.flag) {
					tip.html("<font color='green'>密码修改成功</font>");
				} else {
					tip.html("<font color='red'>密码修改失败， 请检查旧密码是否正确</font>");
				}
			}, 'json');
		}
	}
	
	/*修改基本信息*/
	function update_person_info() {
		var nick = $("#nick").val();
		var email = $("#email").val();
		var qq = $("#qq").val();
		var sex = $("input[name='sex']:checked").val();
		var school = $("#school").val();
		var password = $("#password").val();
		
		var email_regex = /^([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.(?:com|cn|org|info)$/;
		var qq_regex = /^[1-9]\d{4,9}$/;
		var tip = $("#tip_info");
		if(!email.length == 0 && !email_regex.test(email)) {
			tip.html("<font color='red'>邮箱格式不正确</font>");
			return false;
		}
		if(!qq.length == 0 && !qq_regex.test(qq)) {
			tip.html("<font color='red'>QQ必须是5~10位数字</font>");
			return false;
		}
		if(password.length == 0) {
			tip.html("<font color='red'>修改用户信息需要密码验证，请输入正确的密码</font>");
			return false;
		}
		var url = "${ctx}/user/home/updateBasicInfo";
		var params = {
			nick:nick,
			email:email,
			qq:qq,
			sex:sex,
			school:school,
			password:password
		};
		$.post(url, params, function(data){
			if(data.flag) {
				tip.html("<font color='green'>信息修改成功~</font>");
				location.reload();
			} else {
				tip.html("<font color='red'>信息修改失败~</font>");
			}
		}, 'json');
		
	}
	function bind_email(email) {
		var email_regex = /^([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.(?:com|cn|org|info)$/;
		var tip_bind = $("#tip_bind");
		if(!email_regex.test(email)) {
			tip_bind.html("<font color='red'>邮箱格式错误</font>");
			return false;
		}
		var url = "${ctx}/user/home/bindEmail";
		$.post(url, {email:email}, function(data) {
			if(data.flag) {
				tip_bind.html("<font color='green'>验证邮件已发送至您的邮箱， 请在24小时内完成验证</font>");
	//			$('<div>改功能暂未开放，敬请期待</div>').dialog({modal:true});
			} else {
				tip_bind.html("<font color='green'>出错啦~检查邮箱是否填写正确</font>");
			}
		}, 'json');
	}
	
	//判断手机格式是否正确 正确则发送验证码
	function bind_tel(){
		var tel_regex=/^(13[0-9]{9})|(15[0-9]{9})|(18[0-9]{9})$/;
		var tip_bind = $("#tip_bind");
		var user_tel=$('#user_tel').val();
		if(!tel_regex.test(user_tel)){
			tip_bind.html("<font color='red'>手机格式错误</font>");
		}else{
			var data="tel="+user_tel;
			var url="${ctx}/user/home/bindTel";
			$.ajax({
				type:'POST',
				url:url,
				data:data,
				success:function(result){
					if(result=='success'){
						$("#codeForm").dialog({
							width:200,
							modal:true,
						});
					}else if(result=="part"){
						jAlert("验证码已经发送,请不要重复操作");
						$("#codeForm").dialog({modal:true});
					}else if(result=="exist"){
						tip_bind.html("<font color='green'>出错啦~手机已经绑定过一个账户</font>");
					}else if(result=="over"){
						jAlert("对不起,您的操作受限");
					}else{
						tip_bind.html("<font color='green'>出错啦~检查手机是否填写正确</font>");
					}
				}
			});
		}
	}
	
	//手机验证码校验
	$(document).ready(function(){
		
		$("#tel_code_btn").click(function(){
			var code=$('#tel_code').val();
			var user_tel=$('#user_tel').val();
			var data="code="+code;
			data+="&tel="+user_tel;
			$.ajax({
				type:'POST',
				data:data,
				url:'${ctx}/user/home/telVerify',
				success:function(result){
					if(result=='success'){
						jAlert("绑定成功");
						$("#tip_bind").html("");
						$('#bind_tel_container').html("您已经绑定了:"+user_tel+",修改支付宝账号需要手机验证码");
						$("#codeForm").dialog('close');
						location.reload();
					}else{
						jAlert("验证码错误");
					}
				}
			});
		});
	});
	
	
	//判断支付宝格式是否正确
	function bind_alipay(){
		var tip_bind = $("#tip_bind");
		var alipay=$('#alipay').val();
		if('${user.telActive}'=='false'){
			tip_bind.html("<font color='red'>请先绑定电话！</font>");
		}else if(alipay.trim()==''){
			tip_bind.html("<font color='red'>支付宝名称不能为空！</font>");
		}else{
			var data="alipay="+alipay;
			var url="${ctx}/user/home/bindAlipay";
			$.ajax({
				type:'POST',
				url:url,
				data:data,
				success:function(result){
					if(result=='success'){
						$("#alipay_Form").dialog({modal:true,width:300});
					}else if(result=="exist"){
						tip_bind.html("<font color='green'>出错啦~支付宝已经绑定过一个账户</font>");
					}
				}
			});
		}
	}
	
	
	//支付宝重新输入验证
	$(document).ready(function(){
		$("#alipay_btn").click(function(){
			var alipay=$('#alipay').val().trim();
			var alipay_again=$('#alipay_again').val().trim();
			if(alipay==alipay_again){
				var data="alipay="+alipay;
				$.ajax({
					type:'POST',
					data:data,
					url:'${ctx}/user/home/alipayVerify',
					success:function(result){
						jAlert(result);
						if(result=='success'){
							jAlert("绑定成功");
							$("#tip_bind").html("");
							$('#bind_alipay_container').html("您已经绑定了:"+alipay);
							$("#alipay_Form").dialog('close');
							location.reload();
						}else{
							jAlert("服务器正忙请稍候再试");
						}
					}
				});
			}
		});
	});
	
</script>
<style>
<!--
#tabs td {
	padding: 5px;
	font-size: 14px;
	FONT-FAMILY: "微软雅黑";
}
-->
</style>
<div id="tabs">
	<ul>
		<li><a href="#tabs-1">基本信息</a></li>
		<li><a href="#tabs-2">修改密码</a></li>
		<li><a href="#tabs-3">安全绑定</a></li>
	</ul>
	<div id="tabs-1">
		<!-- 基本信息 -->
		<table id="tb-1">
			<tr>
				<td colspan="3"><span id="tip_info"></span></td>
			</tr>
			<tr>
				<td><LABEL>用户名：</LABEL></td>
				<td><input type="text" name="username" disabled="disabled" value="${user.username}"/></td>
				<td><span class="tips">不可修改</span></td>
			</tr>
			<tr>
				<td><LABEL>昵　称：</LABEL></td>
				<td><input type="text" name="nick" id="nick" value="${user.nick}"/></td>
				<td></td>
			</tr>
			<tr>
				<td><LABEL>邮　箱：</LABEL></td>
				<td><input type="text" name="email" id="email" value="${user.email}"/></td>
			</tr>
			<tr>
				<td><LABEL>Ｑ　Ｑ：</LABEL></td>
				<td><input type="text" name="qq" id="qq" value="${user.qq}"/></td>
			</tr>
			<tr>
				<td><LABEL>性　别：</LABEL></td>
				<td class="inline">
					<c:if test="${user.sex == \"男\"}">
						<select name="sex">
							<OPTION value="男" selected="selected">男</OPTION>
							<OPTION value="女">女</OPTION>
						</select>
					</c:if>
					<c:if test="${user.sex == \"女\"}">
						<select name="sex">
							<OPTION value="男">男</OPTION>
							<OPTION value="女" selected="selected">女</OPTION>
						</select>
					</c:if>
				</td>
			</tr>
			<tr>
				<td><LABEL>学　校：</LABEL></td>
				<td><input type="text" name="school" id="school" value="${user.school}"/></td>
			</tr>
			<tr>
				<td><LABEL>密　码：</LABEL></td>
				<td><input type="password" name="password" id="password"/></td>
				<td>需要通过密码验证才能修改用户信息</td>
			</tr>
			<tr>
				<td>&nbsp;</td><td><button class="btn btn-primary" onclick="update_person_info()">保存修改</button></td>
			</tr>
		</table>
	</div>
	<!-- 修改密码 -->
	<div id="tabs-2">
		<table id="tb-2">
			<tr>
				<td colspan="3"><span id="tip_pwd"></span></td>
			</tr>
			<tr>
				<td>旧密码：</td>
				<td><input type="password" id="opwd" name="opwd" value=""/></td>
				<td></td>
			</tr>
			<tr>
				<td>新密码：</td>
				<td><input type="password" id="npwd" name="npwd" value=""/></td>
				<td>密码包括6~15个字符， 包含字符，下划线，字母</td>
			</tr>
			<tr>
				<td>确认密码：</td>
				<td><input type="password" id="rpwd" name="rpwd" value=""/></td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td><button class="btn btn-primary" onclick="update_pwd()">修改密码</button></td>
				<td>&nbsp;</td>
			</tr>
		</table>
	</div>
	<!-- 安全绑定 -->
	<div id="tabs-3">
		<span id="tip_bind">&nbsp;</span>
		
		<div class="control-group success">
			<div class="controls">
				<c:choose>
					<c:when test="${user.email == null }">
						邮箱绑定：您没有填写email，请先完善<b>基本信息</b>后再进行邮箱绑定
					</c:when>
					<c:when test="${user.emailActive == false }">
						<div class="input-append">
							邮箱绑定：	绑定邮箱，提高账号安全，享受更多服务
							<input id="inputEmail" type="text" readonly="readonly" value="${user.email }"/><button class="btn btn-primary"  onclick="bind_email('${user.email}')">绑定</button>
						</div>
					</c:when>
					<c:when test="${user.emailActive == true }">
						您已经绑定了:${user.email },修改邮箱需要重新绑定
					</c:when>
				</c:choose>
			</div>
		</div>
		
		<div class="control-group success">
			<div class="controls">
					<c:choose>
						<c:when test="${user.telActive == false }">
							<div class="input-append">
								手机绑定：绑定手机，提高账号安全，及时获取信息 <input type="text" id="user_tel" value=""/><button class="btn btn-primary" onclick="bind_tel()" id="bind_tel_btn">绑定</button>
							 </div>
						</c:when>
						<c:when test="${user.telActive == true }">
							手机绑定：<span id="bind_tel_container">您已经绑定了:${user.tel }</span>
						</c:when>
					</c:choose>
			</div>
		</div>	
		
		<div class="control-group success">
			<div class="controls">
				<c:choose>
					<c:when test="${user.alipayActive == false }">
						<div class="input-append">
							支付宝绑定：绑定支付宝，提高账号安全，享受更多服务 <input type="text" id="alipay"  value=""/><button class="btn btn-primary" onclick="bind_alipay()">绑定</button>
						</div>
					</c:when>
					<c:when test="${user.alipayActive == true }">
						支付宝绑定：<span id="bind_alipay_container">您已经绑定了:${user.alipay }<!--  ,修改支付宝需要重新绑定--></span>
					</c:when>
				</c:choose>
			</div>
		</div>	
		
		
		
	</div>
	
	<div id="codeForm" style="display:none;">
		<span class="alert-error">
			
		</span>
		<div class="">
			<input id="tel_code" type="text" class="span2" value=""/><br/>
			输入验证码, 然后<button id="tel_code_btn" class="btn" >确认</button>
		</div>
	</div>
	
	<div id="alipay_Form" style="display:none;">
		<table>
			<tr>
				<td>
					请再次输入支付宝账户名:
				</td>
				
			</tr>
			<tr>
				<td>
					<input id="alipay_again" type="text" width="20"/><Br>
				</td>
			</tr>
			<tr>
				<td>
					<input id="alipay_btn"  type="button" class="btn" value="确认"/>
				</td>
			</tr>
		</table>
		
	</div>
</div>